<script setup lang="ts">
import Account from '@/components/icons/Account.vue';
import Bell from '@/components/icons/Bell.vue';
import Clear from '@/components/icons/Clear.vue';
import Lock from '@/components/icons/Lock.vue';
import Update from '@/components/icons/Update.vue';
import Warning from '@/components/icons/Warning.vue';
import YHeader from '@/components/YHeader.vue';
import { useAuthStore } from '@/store/auth';
import UpdateVersion from '@/components/UpdateVersion.vue';
import { ref } from 'vue';

const onLogout = () => {
    const authStore = useAuthStore();
    authStore.logout();
    authStore.goLogin();
}

const showCheck = ref(false);

</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <div class="content">
            <div class="group">
                <div class="row">
                    <Account class="left"></Account>
                    <p class="center">账号与安全</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
            </div>
            <div class="group">
                <div class="row">
                    <Lock class="left"></Lock>
                    <p class="center">隐私设置</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
                <div class="row">
                    <Bell class="left"></Bell>
                    <p class="center">推送设置</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
            </div>
            <div class="group">
                <div class="row">
                    <Clear class="left"></Clear>
                    <p class="center">清除缓存</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
                <div class="row" @click="showCheck = true">
                    <Update class="left"></Update>
                    <p class="center">检查更新</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
                <div class="row">
                    <Warning class="left"></Warning>
                    <p class="center">关于</p>
                    <van-icon class="right" name="arrow" size="20" color="#A6A5AC"/>
                </div>
            </div>
            <div class="button" @click="onLogout">
                <van-button round type="danger">退出登录</van-button>
            </div>
        </div>
        <UpdateVersion v-if="showCheck" @close="showCheck = false"></UpdateVersion>
    </div>
</template>

<style lang="scss" scoped>
.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .group {
        width: 95%;
        display: flex;
        flex-direction: column;
        margin-top: 3%;
        border-radius: 15px;
        background-color: white;
        .row {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            .left {
                width: 10%;
            }
            .center {
                margin: 3%;
                width: 77%;
            }
            .right {
                width: 10%;
            }
        }
    }
    .button {
        width: 95%;
        display: flex;
        flex-direction: column;
        margin-top: 3%;
    }
}
</style>